/**
 * 箭头
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const ArrowImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.save();
    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.miterLimit = 4;
    ctx.fillStyle = col;
    ctx.scale(0.039, 0.04);
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(885.113 * r, 489.373 * r);
    ctx.lineTo(628.338 * r, 232.599 * r);
    ctx.bezierCurveTo(615.842 * r, 220.102 * r, 595.58 * r, 220.102 * r, 583.084 * r, 232.599 * r);
    ctx.bezierCurveTo(570.587 * r, 245.096 * r, 570.587 * r, 265.357 * r, 583.084 * r, 277.854 * r);
    ctx.lineTo(786.384 * r, 481.154 * r);
    ctx.lineTo(158.025 * r, 481.154 * r);
    ctx.bezierCurveTo(140.989 * r, 481.154 * r, 127.179 * r, 494.965 * r, 127.179 * r, 512 * r);
    ctx.bezierCurveTo(127.179 * r, 529.036 * r, 140.99 * r, 542.846 * r, 158.025 * r, 542.846 * r);
    ctx.lineTo(786.385 * r, 542.846 * r);
    ctx.lineTo(583.084 * r, 746.147 * r);
    ctx.bezierCurveTo(570.587 * r, 758.643 * r, 570.587 * r, 778.905 * r, 583.084 * r, 791.402 * r);
    ctx.bezierCurveTo(589.332 * r, 797.65 * r, 597.522 * r, 800.774 * r, 605.711 * r, 800.774 * r);
    ctx.bezierCurveTo(613.9 * r, 800.774 * r, 622.09 * r, 797.65 * r, 628.338 * r, 791.402 * r);
    ctx.lineTo(885.113 * r, 534.627 * r);
    ctx.translate(862.486 * r, 512 * r);
    ctx.rotate(0);
    ctx.arc(0, 0, 31.999 * r, 0.785, -0.785, true);
    ctx.rotate(0);
    ctx.translate(-862.486 * r, -512 * r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { ArrowImage };